<template>
  <div id="body">
    <el-header>
      <div class="handle-box">
        <!-- 图层id -->
        <span style="margin-right: 10px;">{{$t('area.Layer')}}</span>
        <treeselect v-model="mapId"
                    :placeholder="$t('operating.pleaseChosen')"
                    :show-count="true"
                    :maxHeight="600"
                    :options="mapTreeData"
                    :default-expand-level="1"
                    @select="nodeClick"
                    style="width: 150px;">
        </treeselect>
        <!-- 部门id -->
        <span style=" margin-right: 10px;">{{$t('history.deptname')}}</span>
        <treeselect v-model="deptValue"
                    :placeholder="$t('operating.pleaseChosen')"
                    :show-count="true"
                    :maxHeight="600"
                    :options="depts"
                    :default-expand-level="1"
                    @input="getFilterObjData"
                    style="width: 150px;"
                    size="mini">
        </treeselect>
        <!-- 查询对象id -->
        <span style="margin: 0px 10px;">{{$t('history.objValue')}}</span>
        <el-select v-model="objValue"
                   :placeholder="$t('operating.pleaseChosen')"
                   filterable
                   :filter-method="filterDeptObj"
                   style="width: 120px;">
          <el-option v-for="item in deptObjData"
                     :key="item.resourceId"
                     :label="item.name"
                     :value="item.resourceId"></el-option>
        </el-select>
        <!-- 查询时间 -->
        <span style="margin: 0px 10px;">{{$t('history.date')}}</span>
        <el-date-picker v-model="dateValue"
                        type="datetimerange"
                        :start-placeholde="$t('operating.StartTime')"
                        :end-placeholde="$t('operating.EndTime')"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :clearable="false"
                        size="mini"
                        style="width: 350px;">
        </el-date-picker>
        <!-- 搜索提交代码 -->
        <el-button icon="el-icon-search"
                   @click="checkHistoryDetailNew"
                   style="margin-left: 10px; background-color:#f1a11e; color: #fff;">{{ $t('operating.search')}}</el-button>
        <!--      <el-button type="primary" @click="checkHistorySearch" style="margin-left: 10px;">{{$t('history.checkHistorySearch')}}</el-button>-->
      </div>
    </el-header>

    <el-main>
   
            <TrajeCtory/>
    </el-main>

    <el-dialog :title="$t('history.showDetail')"
               :visible.sync="showDetail"
               width="80%"
               @open="openDialogCallBack"
               @close="closeDialog"
               :close-on-click-modal="false"
               custom-class="history-detial">

      <div id="mapbox3"
           style="height: 700px; width: 100%;">
        <!-- 地图容器 -->
        <!-- <div id="map" v-bind:style="{height: mapHeight, width: mapWidth}"></div> -->
        <div id="map"
             style="height: 700px; width: 100%;"></div>

        <div class="positiondiv"><span></span></div>
        <div class="scalediv"><span></span></div>
        <!-- 弹出气泡 -->
        <!-- <div style="display: none;">
          <div id="popup" class="ol-popup">
            <a href="javascript:;" id="popup-closer" class="ol-popup-closer" title="关闭"></a>
            <div id="popup-content"></div>
          </div>
        </div> -->

        <!-- 显示当前点时间 -->
        <div class="historytime">{{$t('history.historytime')}}<span id="Tagtime"></span></div>
        <el-row class="toolrow"
                :gutter="20">
          <el-col :span="2">
            <!-- 播放暂定按钮 -->
            <el-tooltip :content="playbtnTooltip"
                        placement="top">
              <el-button class="playbtn"
                         ref="playbtn"
                         type="primary"
                         icon="al-icon-carplay"
                         size="mini"
                         @click="clickPlayBtn"
                         circle></el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="16">
            <!-- 进度滑块 -->
            <div class="progress_slider"
                 @mousedown="pvChange">
              <el-slider v-model="progressIndex"
                         :max="progressMax"
                         @change="progressValueChange"
                         :format-tooltip="formatProgressTooltip"></el-slider>
            </div>
          </el-col>
          <el-col :span="6">
            <!-- 速度滑块 -->
            <div class="speed_slider">
              <span>{{$t('history.speed')}}</span>
              <el-select v-model="speedIndex"
                         style="width:80px;">
                <el-option v-for="item in speedIndexs"
                           :key="item.speed"
                           :label="item.label"
                           :value="item.speed"></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>

      </div>

    </el-dialog>
  </div>
</template>


<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import TrajeCtory from '@/components/TrajeCtory'
import ol from "openlayers";
import { Tile as TileLayer, Vector as VectorLayer, Image } from 'ol/layer.js';
import { OSM, Vector, ImageStatic } from 'ol/source.js';
import Feature from 'ol/Feature.js';
import { Circle, LineString, Point, Polygon } from 'ol/geom.js';
import { Fill, Stroke, Style, Text, Icon } from 'ol/style.js';
import {
  Load_Map,
  Load_Fence,
  _TransPixel,
  TagStyle,
  _dPR,
  _iMap,
  t,
  FenceLayer,
  FenceSource,
  LoadTypeData,
  sendThis
} from "@/utils/iMap.js";
import { baseUrl } from '@/utils/global.js';
import Cookie from 'js-cookie';

export default {
  components: { Treeselect,TrajeCtory },
  data () {
    return {
      /*************显示相关************/
      mapTreeData: [],
      deptValue: null, //部门选择的值
      objValue: "", //部门中查找对象的值
      depts: [], //部门列表
      deptObjData: [],
      deptObjDataCopy: [],
      startTime: 0,
      endTime: 0,

      dateValue: "", //日期控件值
      playbtnTooltip: "暂停",

      showDetail: false, //显示详情
      tableData: [], //历史数据表格中的数据容器
      tableHistoryData: [], //显示的历史搜索条件的列表数据容器
      showTable: false, //控制搜索结果和历史搜索记录的表格展示信息
      showFence: false, //显示围栏


      /*************显示相关************/
      mapHeight: window.innerHeight - 200 + "px", //地图区域高度
      mapWidth: window.innerWidth - 40 + "px",

      tempEvents: [],

      //  **************地图相关参数**************  //
      lineLayer: null,//标签图层
      lineSource: null,//标签资源容器
      mapId: null,//保存地图ID
      trackData: [],
      param: {},//请示历史轨迹是的参数
      progressIndex: 0,//播放进度位置
      progressLimitIndex: 0,
      progressMax: 0,//播放进度最大值
      speedIndex: 1,
      speedIndexs: [
        { speed: 1, label: "x1" },
        { speed: 2, label: "x2" },
        { speed: 4, label: "x4" },
        { speed: 8, label: "x8" },
        { speed: 16, label: "x16" }
      ],
      styles: {
        'linestring': new Style({
          stroke: new Stroke({
            color: 'green',
            width: 3
          }),
          zIndex: 999
        }),
        'geoMarker': new Style({
          image: new Icon({
            offset: [0, 0],
            size: [22, 30],
            src: "../../static/img/icon/5ren.png",
            color: '#8959A8',
            opacity: 1
          }),
          zIndex: 10000
        }),
        'point': new Style({
          image: new Circle({
            radius: 5,
            snapToPixel: false,
            fill: new Fill({
              color: 'red'
            }),
            stroke: new Stroke({
              color: 'white',
              width: 1
            })
          })
        })
      },
      timeoutIndex: null,
      //  **************地图相关参数**************  //
      tableMaxHeight: 800,
    };
  },

  methods: {
    //支持拼音过滤
    filterDeptObj (val) {
    //   this.objValue = val;
    //   let pinyin = require("pinyin");
    //   let pinyinName;
    //   if (val) {
    //     this.deptObjData = this.deptObjDataCopy.filter((item) => {
    //       if (typeof item.name != "undefined") {
    //         // 将每一个名字都转换成拼音
    //         pinyinName = pinyin(item.name, {
    //           heteronym: true, // 启用多音字模式
    //           style: pinyin.STYLE_NORMAL
    //         });
    //         let temp = "";
    //         for (let i = 0; i < pinyinName.length; i++) {
    //           temp = temp + pinyinName[i][0].substr(0, 1);
    //         };
    //         /**
    //          * 1、直接从原有的名字中做匹配，考虑大小写的问题
    //          * 2、将汉字转换成拼音做匹配，考虑大小写的问题
    //          */
    //         if ((item.name.indexOf(val) != -1) ||
    //           (item.name.toLowerCase().indexOf(val) != -1) ||
    //           (item.name.indexOf(val.toLowerCase()) != -1) ||
    //           (item.name.toLowerCase().indexOf(val.toLowerCase()) != -1) ||
    //           (temp.indexOf(val) != -1) ||
    //           (temp.toLowerCase().indexOf(val) != -1) ||
    //           (temp.indexOf(val.toLowerCase()) != -1) ||
    //           (temp.toLowerCase().indexOf(val.toLowerCase()) != -1)) {
    //           return true;
    //         }
    //       }
    //       return false;
    //     })
    //   } else {
    //     this.deptObjData = this.deptObjDataCopy;
    //   }
    },

    /**
     * 查看搜索记录
     */
    checkHistorySearch () {
      this.showTable = false;
      this.tableData = [];
      this.tableHistoryData = [];
      this.getHistorySearchInfo();
    },
    /**
     * 获取地图树
     */
    getMapTree () {
      this.$api.realtimeposition.getMapTree().then(res => {
        let RES = this.responseUse(res);
        if (typeof RES != "undefined") {
          this.mapTreeData = RES;
        }
      });
    },
    /**
     * 地图树点击响应
     */
    nodeClick (draggingNode, dropNode, ev) {
      this.mapId = draggingNode.id;
    },
    // 播放按钮响应
    clickPlayBtn () {

      clearTimeout(this.timeoutIndex);
      let className = $(".playbtn i").attr("class");

      if (className === "al-icon-carplay") {
        // 处于暂定状态
        $(".playbtn i").attr("class", "al-icon-carpause");
        this.playbtnTooltip = "暂停";
        // 播放
        this.drawLine();
      } else if (className === "al-icon-carpause") {
        // 处于播放状态
        $(".playbtn i").attr("class", "al-icon-carplay");
        this.playbtnTooltip = "播放";
        // 暂停
      }
    },

    // 格式化进度滑块中的tooltip中的文字
    formatProgressTooltip (val) {
      if (this.trackData.length == 0) {
        return '';
      }
      if (this.trackData[val].speed) {
        return this.trackData[val].speed;
      }

      return '';
    },

    //详情dialog打开动画结束时的回调
    openDialogCallBack () {
      let self = this;
      setTimeout(() => {
        //请求轨迹点数据
        self.loadMapAndTrack();
      }, 1000);
    },

    /**
     * 关闭dialog时的回调函数
     */
    closeDialog () {
      this.clearMap();
      clearTimeout(this.timeoutIndex);
      this.progressIndex = 0;
      this.progressLimitIndex = 0;
      this.progressMax = 0;
      this.trackData = [];

      if ($(".playbtn i").attr("class") === "al-icon-carpause") {
        $(".playbtn i").attr("class", "al-icon-carplay");
        this.playbtnTooltip = "播放";
      }

    },
    // 请求历史轨迹详情数据，加载地图，渲染轨迹
    loadMapAndTrack () {
      let self = this;
      self.progressIndex = 0; // 防止没有查到数据时，无法置零

      self.$api.realtimeposition.getMap(self.mapId).then(res => {
        let RES = self.responseUse(res);
        if (undefined != RES) {
          Load_Map(
            baseUrl + RES.mapPath,
            RES.mapActualX,
            RES.mapActualY,
            RES.mapPixelX,
            RES.mapPixelY,
            RES.mapPixelX / RES.mapActualX,
            [RES.mapOriginX, RES.mapOriginY]
          );

          self.$api.historydisplayinfo.getHistoryInfoDetail(self.param).then(res => {
            let RES = self.responseUse(res);
            if (undefined != RES) {
              if (RES.length > 0) {
                self.trackData = RES;

                if (self.trackData.length > 1) {
                  self.progressMax = self.trackData.length - 1;
                } else {
                  self.progressMax = 1;
                }
                console.log('索引：', self.progressIndex, '最大值：', self.progressMax);

                self.initData();

                if ($(".playbtn i").attr("class") === "al-icon-carplay") {
                  // 处于暂定状态
                  $(".playbtn i").attr("class", "al-icon-carpause");
                  self.playbtnTooltip = "暂停";
                }
              } else {
                self.v_MyMessage(self.$t('Notice.noTrackDetails'), "warning");
              }
            }
          });
        }

      });
    },
    pvChange () {
      // 处于播放状态
      clearTimeout(this.timeoutIndex);
      $(".playbtn i").attr("class", "al-icon-carplay");
      this.playbtnTooltip = "播放";
    },
    //进度条发生变化时的回调函数
    progressValueChange (val) {
      console.log("拖动后的值：", val);
      this.progressIndex = 0;
      this.progressLimitIndex = parseInt(val);

      clearTimeout(this.timeoutIndex);
      this.clearMap();
      this.drawLine();
      this.clickPlayBtn();
    },

    // 清除地图中的数据
    clearMap () {
      if (this.lineSource != null) {
        let self = this;
        self.lineSource.forEachFeature(function (feature) {
          self.lineSource.removeFeature(feature);
        });
        // _iMap.removeLayer(self.lineLayer);
      }
    },
    //往地图容器
    initData: function () {
      //移除标签层信息
      _iMap.removeLayer(this.lineLayer);
      // 每次进入不管是否切换查看的详情数据
      // 都将地图中的数据清空

      if (null == this.lineSource) {
        this.lineSource = new Vector({
          wrapX: false
        });
      }

      if (null == this.lineLayer) {
        this.lineLayer = new VectorLayer({
          minResolution: 0,
          maxResolution: _dPR * 2.4,
          source: this.lineSource,
          zIndex: 10000,
          renderBuffer: 100,
          updateWhileAnimating: true,
          updateWhileInteracting: true,
          style: function (feature, resolution) {
            return TagStyle(feature, resolution);
          }
        });
      }

      _iMap.addLayer(this.lineLayer);

      // 往地图中加载轨迹数据
      this.drawLine();
    },

    //绘制线
    drawLine () {
      let lineFeature;
      let to;
      let markPoint;
      let markFeature;
      let from = [this.trackData[this.progressIndex].posX, this.trackData[this.progressIndex].posY];
      if (this.progressIndex === this.trackData.length - 1) {
        to = from;
        $("#Tagtime").text(this.trackData[this.progressIndex].speed);
      } else {
        let toIndex = this.progressIndex + 1;
        to = [this.trackData[toIndex].posX, this.trackData[toIndex].posY];
        $("#Tagtime").text(this.trackData[toIndex].speed);
      }

      // 画点
      let coords = [_TransPixel(from), _TransPixel(to)];
      if (this.progressIndex === 0) {
        let first = [this.trackData[0].posX, this.trackData[0].posY];
        markPoint = new Point(_TransPixel(first));
      } else {
        markPoint = new Point(_TransPixel(to));
      }
      markFeature = new Feature(markPoint);
      // 画线
      lineFeature = new Feature(new LineString(coords));
      lineFeature.setStyle(this.styles.linestring);
      this.lineSource.addFeature(lineFeature);


      // 定时划线到地图中去
      if (this.progressIndex < this.trackData.length - 1) {
        let self = this;
        this.progressIndex++;
        let temp;
        if (1 === self.speedIndex) {
          temp = 300 * 2;
        } else {
          temp = (300 / self.speedIndex).toFixed();
        }
        if (this.progressIndex < this.progressLimitIndex) {
          self.drawLine();
        } else {
          self.timeoutIndex = setTimeout(function () {
            self.drawLine();
          }, temp);
        }
      }

      let toObj = this.lineSource.getFeatureById("to");

      if (null != toObj) {
        // 已经添加过
        toObj.getGeometry().setCoordinates(_TransPixel(to));
      } else {
        markFeature.setId("to");
        markFeature.setStyle(this.styles.geoMarker);
        this.lineSource.addFeature(markFeature);
      }

    },

    //查看列表中其中一项的历史详情
    checkHistoryDetail (index, row) {

      this.param = {
        "departmentId": row.departmentId,
        "resourceId": row.resourceId,
        "startTime": row.startTime,
        "endTime": row.endTime,
        "mapId": row.mapId,
      }
      console.log("查询详情的请求参数：", this.param);
      this.mapId = row.mapId;
      this.showDetail = !this.showDetail;
    },
    //查看列表中其中一项的历史详情
    checkHistoryDetailNew () {
      this.speedIndex = 2;
      this.progressIndex = 0;
      this.progressLimitIndex = 0
      let self = this;

      self.showTable = true;
      self.startTime = new Date(self.dateValue[0]).getTime();
      self.endTime = new Date(self.dateValue[1]).getTime();
      // 判断请求时长是否大于8小时
      if (self.endTime - self.startTime > 1000 * 60 * 60 * 2) {
        this.v_MyMessage(this.$t('Notice.timeRangeExceededTwo'), 'warning');
        self.startTime = 0;
        self.endTime = 0;
        return false;
      }

      this.param = {
        // "departmentId": parseInt(this.deptValue),
        "resourceId": self.objValue,
        "startTime": self.v_FormatDateTime(self.startTime),
        "endTime": self.v_FormatDateTime(self.endTime),
        "mapId": self.mapId
      };
      // this.param = {
      //   "departmentId": row.departmentId,
      //   "resourceId": row.resourceId,
      //   "startTime": row.startTime,
      //   "endTime": row.endTime,
      //   "mapId": row.mapId,
      // }
      // console.log("查询详情的请求参数：", this.param);
      // this.mapId = row.mapId;
      this.showDetail = !this.showDetail;
    },

    /**
     * 根据历史搜索条件进行查询
     */
    againCheckHistory (index, row) {
      this.objValue = row.resourceId;
      this.dateValue = [];
      this.dateValue.push(new Date(row.startTime));
      this.dateValue.push(new Date(row.endTime));
      this.searchHistoryData();
    },

    //搜索历史数据
    searchHistoryData () {
      if (this.objValue != "") {
        let self = this;

        self.showTable = true;
        let startDate = self.v_FormatDateTime(self.dateValue[0]);
        let endDate = self.v_FormatDateTime(self.dateValue[1]);

        let param = {
          // "departmentId": parseInt(this.deptValue),
          "resourceId": self.objValue,
          "startTime": startDate,
          "endTime": endDate,
        };

        console.log("param", param);

        self.$api.historydisplayinfo.getHistoryList(param).then(res => {
          let RES = this.responseUse(res);
          if (undefined != RES && RES.length > 0) {

            self.tableData.splice(0);

            let index = 0;
            let len = 1000 * 60 * 60 * 2; //两个小时的毫秒数
            let start;
            let end;
            let tempstart;
            let tempend;
            for (let i = 0; i < RES.length; i++) {
              start = (new Date(RES[i].startTime)).getTime();
              end = (new Date(RES[i].endTime)).getTime();

              let interval = end - start;

              let rounding = parseInt(interval / len);

              if (rounding === 0) {
                self.tableData.push(RES[i]);
              } else {
                let temp = interval - rounding * len;
                if (temp > 0) {
                  rounding++;
                }
                for (let j = 0; j < rounding; j++) {
                  let obj = {
                    "areaName": RES[i].areaName,
                    "departmentId": RES[i].departmentId,
                    "endTime": "",
                    "mapId": RES[i].mapId,
                    "resourceId": RES[i].resourceId,
                    "resourceName": RES[i].resourceName,
                    "startTime": ""
                  };
                  if (j === rounding - 1) {
                    obj.startTime = self.v_FormatDateTime(start);
                    obj.endTime = self.v_FormatDateTime(end);
                  } else {
                    obj.startTime = self.v_FormatDateTime(start);
                    obj.endTime = self.v_FormatDateTime(start + len);
                  }
                  self.tableData.push(obj);
                  start = start + len;
                }
              }
            }
          } else {
            self.v_MyMessage(this.$t('Notice.noDataHasBeenFound'), "warning");
          }

        });
      } else {
        this.v_MyMessage(this.$t('Notice.noObjectSelected'), "warning");
      }


    },

    tableRowEvents (row, rowIndex) {

    },

    //切换部门时，更新对象数据
    getFilterObjData (val) {
      console.log("部门切换成:" + val);
      //把部门对象选择框清空掉
      this.objValue = "";
      // let param = {departmentId: val};

      if (val != undefined) { //选择有部门
        this.$api.historydisplayinfo.getDeptDetail(val).then(res => {
          let RES = this.responseUse(res);
          this.deptObjData = RES;
          this.deptObjDataCopy = RES;
        });
      } else { //直接将部门删除的情况下，没有部门时，将资源列表中所有的数据都显示出来
        this.$api.historydisplayinfo.getAllDeptDetail().then(res => {
          let RES = this.responseUse(res);
          this.deptObjData = RES;
          this.deptObjDataCopy = RES;
        });
      }
    },

    //  获取部门列表
    getDeptList () {
      this.$api.historydisplayinfo.getDeptList().then(res => {
        let RES = this.responseUse(res);
        this.depts = RES;
      })
    },
    //显示围栏
    showFenceInfo (val) {
      //回调参数为更新后的值
      if (val) {
        //显示围栏
        let Geo = "https://www.easy-mock.com/mock/5bbdc2881dd82830aecf5840/laofuzi/test/fence/getDataListFormat";
        Load_Fence(Geo);
      } else {
        //清除围栏
        _iMap.removeLayer(FenceLayer);
      }
    },

    //展示告警通知
    openWaringNotify () {
      //监听通知

      //将监听到的告警通知信息显示出来
      this.openWarningFrame(
        "告警",
        "详细告警信息，增加信息长度，看信息换行效果"
      );
    },
    //打开告警弹框
    openWarningFrame (title, message) {
      this.$notify({
        title: title,
        message: message,
        type: "warning", //弹框的种类success/warning/info/error
        duration: 3000,
        position: "top-right",
        offset: 400
      });
    },

    // 初始化默认地图
    initMap () {
      console.log("开始加载地图");
      Load_Map("static/map/company.jpg", 67.65, 54.16, 1600, 1280, 1600 / 67.65, [-14.76, -29.15]);
      sendThis(this);
      LoadTypeData();
    },

    //消息弹出框
    myMessage: function (msg, type) {
      this.$message({
        message: msg,
        center: true,
        type: type
      });
    },

    //初始化函数
    init: function () {
      let self = this;
      //获取部门数据
      self.getDeptList();
      this.getMapTree();

      // 刚打开时，部门默认不选择，此时，人员应该显示所有
      this.$api.historydisplayinfo.getAllDeptDetail().then(res => {
        let RES = this.responseUse(res);
        this.deptObjData = RES;
        this.deptObjDataCopy = RES;
        console.log('资源数据：', this.deptObjData);
      });

      this.getHistorySearchInfo();

      console.log("跳转时传过来的参数：", this.$route.query.id);
      // 判断是否是货物使用时长模块跳转过来的
      if (this.$route.query.source === "CargoServiceTime") { // 从货物使用时长管理模块跳转过来的

        if (this.$route.query.starttime != undefined && this.$route.query.endtime != undefined && this.$route.query.nfid != undefined) {
          this.objValue = this.$route.query.nfid;
          this.dateValue[0] = this.$route.query.starttime;
          this.dateValue[1] = this.$route.query.endtime;
          this.searchHistoryData();
        }
      } else if (this.$route.query.source === "AlarmRecord") { // 从告警记录模块跳转过来的

        if (this.$route.query.starttime != undefined && this.$route.query.endtime != undefined && this.$route.query.resourceId != undefined) {
          this.objValue = this.$route.query.resourceId;
          this.dateValue[0] = this.$route.query.starttime;
          this.dateValue[1] = this.$route.query.endtime;
          this.searchHistoryData();
        }
      }
    },

    /**
     * 查询历史搜索记录
     */
    getHistorySearchInfo () {
      // 自动获取搜索的历史记录信息
      let param = {
        "pageNum": "1",
        "pageSize": "10",
        "param": {
          "model": "history"
        }
      };
      this.$api.historydisplayinfo.getHistorySearchInfo(param).then(res => {
        let RES = this.responseUse(res);
        if (RES.content.length > 0) {
          for (let i = 0; i < RES.content.length; i++) {
            this.tableHistoryData.push(RES.content[i].searchValueMap);
          }
        }
      });
    },
    //刷新窗口
    windowRefresh: function () {
      this.mapHeight = window.innerHeight - 120 + "px";
      this.mapWidth = window.innerWidth - 40 + "px";
      this.tableMaxHeight = window.innerHeight - 180;
    },
    // 设置查询时间
    setQueryTime () {
      let myDate = new Date();
      let year = myDate.getFullYear();
      let month = myDate.getMonth();
      let day = myDate.getDate();
      let hour = myDate.getHours();
      let fen = myDate.getMinutes();
      let second = myDate.getSeconds();
      this.dateValue = [new Date(year, month, day, hour - 2, fen, second), new Date(year, month, day, hour, fen, second)];
    },
  },


  // 钩子
  mounted () {
    this.setQueryTime();
    // 动态设置map的高度
    // 首先在DOM渲染数据时，设置map的高度
    this.windowRefresh();
    // 然后监听window的resize事件，在浏览器窗口变化时再设置下map的高度
    let self = this;
    window.onresize = function temp () {
      self.windowRefresh();
    };

    this.init();
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../assets/styles/openlayers.scss";
.history-detial .el-dialog__title {
  color: #409eff !important;
  font-size: 24px;
  border-left: 7px solid #f1a11e;
  padding-left: 10px;
}

#mapbox3 .ol-unselectable {
  bottom: 10px !important;
}
</style>
<style scoped>
#body {
  /* width: 100%;
  height: 100%; */
}

.background {
  width: 100%;
  height: 100%;
  /* background: url("../../../static/map/china.png") no-repeat center center; */
}

#mapbox3 {
  background-color: #fff;
  /*z-index: 10000;*/
}

#map {
  /*background-color: #939e89;*/
  /*z-index: 10000;*/
}
.el-table__row .cell {
  white-space: pre-line;
}

/*鼠标坐标*/
.positiondiv {
  position: absolute;
  left: 80px;
  bottom: 70px;
  width: auto;
  height: 20px;
  /* background-color: #fff; */
}
/*比例尺*/
.scalediv {
  position: absolute;
  bottom: 40px;
  left: 80px;
  width: 100px;
  height: 15px;
  border-left: #000 solid 1px;
  border-bottom: #000 solid 1px;
  border-right: #000 solid 1px;
  /* background-color: #fff; */
}
.scalediv span {
  position: absolute;
  bottom: 2px;
  width: 100px;
  /* margin: 0 auto; */
  text-align: center;
  /* background-color: #fff; */
}

/* 当前点时间显示控件 */
.historytime {
  position: absolute;
  bottom: 40px;
  left: 150px;
  display: none;
}

/* 播放进度条 */
.progress_slider {
  /* position: absolute; */
  width: 500px;
  /* left: 250px;
  bottom: 30px; */
}

/* 速度进度条 */
.speed_slider {
  /* position: absolute; */
  width: 200px;
  /* left: 830px;
  bottom: 35px; */
}
.speed_slider span {
  color: #409eff;
  font-size: 16px;
}

/* 播放暂定按钮 */
.playbtn {
  /* position: absolute;
  left: 170px;
  bottom: 35px; */
}

.toolrow {
  position: absolute;
  width: 800px;
  height: 40px;
  bottom: 40px;
  left: 50%;
  margin-left: -400px !important;
  /* background-color: brown; */
}

.toolrow .el-col {
  line-height: 40px;
}
.handle-box {
  width: 100%;
  padding-top: 20px;
}

.handle-box * {
  float: left;
}

.handle-box span {
  line-height: 28px;
}

.list-title {
  margin-left: 300px;
  font-size: 20px;
  font-weight: 800;
}
</style>
